import {toAbnormal, toAllAbnormal, toAllWarning, toWarning} from "@/utils/pageRedirect"
import {View, Text} from "@tarojs/components"
import React, {CSSProperties} from "react"
import AllowRight from "../others/allowRight"

export const AbnormalMsgItem: React.FC<{
	type: "warning" | "abnormal"
	devId?: number | string
	label: string
	labelDesc?: string
	value?: number
	disabled?: boolean
	textStyle?: CSSProperties
	descStyle?: CSSProperties
}> = ({label, labelDesc, value, disabled, devId, type, textStyle, descStyle}): JSX.Element => {
	if (value === undefined) {
		return (
			<View className="h-34 px-10 flex justify-between items-center">
				<View
					className="w-full h-16"
					style={{
						backgroundColor: "#f4f4f4"
					}}
				></View>
			</View>
		)
	} else {
		return (
			<View
				className="h-34 pl-10 pr-16 flex justify-between items-center gap-x-16"
				onClick={() => {
					console.log(devId)
					if (!disabled) {
						if (devId) {
							switch (type) {
								case "warning":
									toWarning(devId)
									break
								case "abnormal":
									toAbnormal(devId)
									break
							}
						} else {
							switch (type) {
								case "warning":
									toAllWarning()
									break
								case "abnormal":
									toAllAbnormal()
									break
							}
						}
					}
				}}
			>
				<View
					className="block flex-1 h-20 leading-20"
					style={Object.assign(
						{
							fontSize: "28rpx",
							fontWeight: "500"
						},
						textStyle
					)}
				>
					{label}
					{labelDesc ? (
						<Text className="text-xxx_text" style={Object.assign({}, descStyle)}>
							{labelDesc}
						</Text>
					) : null}
				</View>

				<AllowRight count={value}></AllowRight>
			</View>
		)
	}
}

const AbnormalMsg: React.FC<{
	devId?: number | string
	warningNum?: number
	abnormalNum?: number
	disabled?: boolean
	style?: CSSProperties
	warningLabel?: string
	warningLabelDesc?: string
	abnormalLabel?: string
	abnormalLabelDesc?: string
	showWarning?: boolean
	showAbnormal?: boolean
	textStyle?: CSSProperties
	descStyle?: CSSProperties
}> = ({
	warningNum,
	abnormalNum,
	disabled,
	style,
	devId,
	warningLabel,
	abnormalLabel,
	warningLabelDesc,
	abnormalLabelDesc,
	showAbnormal = true,
	showWarning = true,
	descStyle,
	textStyle
}): JSX.Element => {
	return (
		<View
			className="abnormalMsg w-full rounded-card bg-white"
			style={Object.assign(
				{
					boxShadow: "0px 0px 4rpx 0px rgba(225,227,228,1);",
					padding: "12rpx",
					margin: "24rpx auto 0"
				},
				style
			)}
		>
			{showWarning ? (
				<AbnormalMsgItem
					devId={devId}
					label={warningLabel ? warningLabel : "报警信息"}
					labelDesc={warningLabelDesc}
					type="warning"
					value={warningNum}
					disabled={disabled}
					textStyle={textStyle}
					descStyle={descStyle}
				></AbnormalMsgItem>
			) : null}
			{showAbnormal && showWarning ? (
				<View className="w-303 h-1 bg-x_line mx-auto my-4"></View>
			) : null}

			{showAbnormal ? (
				<AbnormalMsgItem
					devId={devId}
					label={abnormalLabel ? abnormalLabel : "异常记录"}
					labelDesc={abnormalLabelDesc}
					type="abnormal"
					value={abnormalNum}
					disabled={disabled}
					textStyle={textStyle}
					descStyle={descStyle}
				></AbnormalMsgItem>
			) : null}
		</View>
	)
}

export default AbnormalMsg
